<template>
  <el-dialog
    :title="name"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <div class="tag_wrapper">
      <el-tag
        v-for="item of serviceList"
        :key="item"
        style="margin-bottom:10px;"
        size="mini"
      >{{ item }}</el-tag>
    </div>
    <div class="comment">{{ comment }}</div>
    <farm-map
      :lat-lng="latLng"
    />
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import FarmMap from './FarmMap'

export default {
  name: 'FarmDialog',
  components: {
    FarmMap
  },
  directives: { elDragDialog },
  props: {
    latLng: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    serviceList: {
      type: Array,
      required: true
    },
    comment: {
      type: String,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleClose() {
      this.$emit('close-dialog')
    }
  }
}
</script>

<style scoped lang="scss">
.tag_wrapper {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.comment {
  margin-top:10px;
  font-size:14px;
  line-height: 30px;
  text-indent: 2em;
  text-align:justify;
}
</style>
